<template>
  <view class="job-details">
    <!-- 自定义导航栏 -->
    <u-navbar
      title="职位详情"
      :border="false"
      titleColor="#333333"
      :titleStyle="{ fontSize: '36rpx', fontWeight: '500' }"
      leftIcon="arrow-left"
      placeholder
      @leftClick="goBack"
    >
    </u-navbar>
    <view class="gd-btn">
    	<button @click="toggleFavorite" v-if="isFavorite" plain>
			<image  style="width: 100rpx" class="gd-btn-img" src="/static/index/favorites-icon-active.png"></image>
		</button>
		<button @click="toggleFavorite" v-else plain>
			<image class="gd-btn-img" src="/static/index/favorites-icon.png"></image>
		</button>
    	<button open-type="share" plain><image class="gd-btn-img" src="/static/index/share-icon.png"></image></button>
    	<button open-type="contact" plain><image class="gd-btn-img" src="/static/index/kf-icon.png"></image></button>
    </view>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <u-loading-icon mode="spinner" size="40" color="var(--u-primary)"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 错误状态 -->
    <view v-else-if="hasError" class="error-state">
      <u-icon name="warning" size="40" color="#FF6B35"></u-icon>
      <text class="error-text">数据异常，请稍后重试</text>
      <u-button type="primary" :customStyle="{ backgroundColor: 'var(--u-primary)', borderColor: 'var(--u-primary)' }" @click="retryFetch">重试</u-button>
    </view>

    <!-- 岗位基本信息头部 -->
    <view v-else class="job-header">
      <view class="job-title-row">
        <text class="job-title">{{ jobInfo.title }}</text>
        <text v-if="jobInfo.jobType" class="job-type-chip">{{ jobInfo.jobType }}</text>
        <!-- <view class="title-star" @click="toggleFavorite">
          <u-icon :name="isFavorite ? 'star-fill' : 'star'" size="22" :color="isFavorite ? 'var(--u-primary)' : '#999999'"></u-icon>
        </view> -->
      </view>
      <view class="job-subtitle">{{ jobInfo.industry }} {{ jobInfo.location }}</view>
      
      <!-- 岗位角色和工资列表 -->
      <view class="job-roles" v-if="false">
        <view class="role-item" v-for="(role, index) in jobInfo.roles" :key="index">
          <text class="role-name">{{ role.name }}</text>
          <text class="role-salary">{{ role.salary }}</text>
        </view>
      </view>
      
      <!-- 福利标签 -->
      <view class="benefits-tags">
        <view class="tag-item" v-for="(tag, index) in jobInfo.benefits" :key="index">
          <text class="tag-text">{{ tag }}</text>
        </view>
      </view>
      
      <!-- 报名人数 -->
      <view class="application-count">
        <text class="count-label">已报名: </text>
        <text class="count-number">{{ jobInfo.signupCount || 0 }}</text>
        <text class="count-unit">人</text>
      </view>
    </view>
    
    
    
    <!-- 薪资福利详情 -->
    <view class="salary-benefits-section">
      <view class="section-title">薪资福利</view>
      <view class="payment-info">
        <text class="payment-text">发薪日期 {{ jobInfo.payTime || '—' }}</text>
      </view>
      
      <!-- 岗位详情表格 -->
      <view class="job-table">
        <view class="table-header">
          <text class="header-cell">岗位</text>
          <text class="header-cell">岗位要求</text>
          <text class="header-cell">工价</text>
          <text class="header-cell">报名</text>
        </view>
        <template v-for="(position, index) in jobInfo.positions" :key="index">
          <view class="table-row">
            <text class="cell position-name">{{ position.name }}</text>
            <view class="cell requirements-cell">
              <text class="requirements-text">{{ position.requirements || '--' }}</text>
            </view>
            <view class="cell requirements-cell">
              <text class="wage-text">{{ position.wage || '--' }}</text>
            </view>
            <view class="cell action-cell">
              <u-button
                text="去报名"
                type="primary"
                size="small"
                @click="applyPosition(position)"
                :customStyle="{ backgroundColor: 'var(--u-primary)', borderColor: 'var(--u-primary)' }"
              ></u-button>
            </view>
          </view>
          
          <!-- 招聘人员可见信息 - 在每一行下方 -->
          <view v-if="userCache.getUserInfo()?.isHirePerson" class="hire-info-row">
            <view class="hire-info-content">
              <view class="hire-info-item">
                <text class="hire-info-label">限制报名人数: </text>
                <text class="hire-info-number">{{ position.limitSignUpPersons || 0 }}</text>
                <text class="hire-info-unit">人</text>
              </view>
              <view class="hire-info-item">
                <text class="hire-info-label">提成方案: </text>
                <text class="hire-info-value">{{ position.commission || '—' }}</text>
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
    
    <!-- 详细信息卡片 -->
    <view class="info-cards">
      <view class="info-card" v-for="(info, index) in jobInfo.additionalInfo" :key="index">
        <text class="card-title">{{ info.title }}</text>
        <text class="card-content">{{ info.content }}</text>
      </view>
    </view>
    
    <!-- 企业信息 -->
    <view class="company-section">
      <view class="section-title">企业信息</view>
      <view class="company-info">
        <text class="company-name">{{ jobInfo.companyName }}</text>
        <view v-if="jobInfo.companyScale" class="company-scale">
          <text class="label">规模</text>
          <text class="value">{{ jobInfo.companyScale }}</text>
        </view>
                 <!-- 企业地址和导航 -->
         <view class="company-address-row" v-if="jobInfo.address"  @click="openCompanyNavigation">
			 <u-icon name="map" size="20" color="var(--u-primary)" ></u-icon>
			 
           <text class="address-text">{{ jobInfo.address }}
		   </text>
         </view>
        <view class="company-placeholder"></view>
      </view>
    </view>
    
    <!-- 企业微信二维码弹窗 -->
    <view v-if="showQRCodeModal" class="qr-code-modal" @click="closeQRCodeModal">
      <view class="qr-code-content" @click.stop>
        <view class="qr-code-header">
          <text class="qr-code-title">添加企业微信客服</text>
          <view class="close-btn" @click="closeQRCodeModal">
            <u-icon name="close" size="20" color="#999999"></u-icon>
          </view>
        </view>
        
        <view class="qr-code-body">
          <view class="qr-code-image-container">
            <image 
              class="qr-code-image" 
              src="/static/qrcode/wechat-qr.png" 
              mode="aspectFit"
            ></image>
          </view>
          
          <view class="qr-code-text">
            <text class="main-text">扫码添加企业微信客服</text>
            <text class="sub-text">获取更多职位信息和报名帮助</text>
          </view>
        </view>
        
        <view class="qr-code-actions">
          <u-button 
            type="primary" 
            text="保存二维码" 
            @click="saveQRCodeToAlbum"
            :customStyle="{ 
              backgroundColor: 'var(--u-primary)', 
              borderColor: 'var(--u-primary)',
              borderRadius: '25rpx',
              height: '80rpx'
            }"
          ></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue'
import { jobApi, userApi } from '@/api/api-helper.js'
import { userStore } from '@/stores/userStore'
import { userCache } from '@/utils/userCache'

// 岗位信息（移除測試數據，等待接口填充）
const jobInfo = ref({
  title: '',
  industry: '',
  location: '',
  payTime: '',
  jobType: '',
  roles: [] as any[],
  benefits: [] as string[],
  applicationCount: '',
  positions: [] as any[],
  additionalInfo: [] as any[],
  companyName: '',
  signupCount: 0,
  address: '',
  latitude: 0,
  longitude: 0,
  hireRecruitUseId:'',
  hireRecruitUseEntryId:'',
  jobId:'',
  positionName: '',
  limitSignUpPersons: 0, // 限制报名人数
  commission: '', // 提成方案
})

// 當前招聘ID（路由帶入）
const currentJobId = ref('')

// 收藏状态
const isFavorite = ref(false)

// 加载状态
const loading = ref(false)
// 錯誤狀態
const hasError = ref(false)

// 企业微信二维码弹窗状态
const showQRCodeModal = ref(false)

// 获取岗位详情
const fetchJobDetails = async (jobId: string) => {
  if (!jobId) {
    console.error('岗位ID为空')
    return
  }
  
  try {
    loading.value = true
    console.log('获取岗位详情，ID:', jobId)
    
    // 获取openId
    const openId = userStore.getOpenId()
    console.log('openId:', openId)
    
    const result = await jobApi.getHireRecruitUseById(jobId, openId)
    
    console.log('接口返回结果:', result)
    
    if (result && result.code === 200) {
      const jobData: any = result.data || {}
      console.log('岗位详情数据:', jobData)
      console.log('signUpPersons 字段值:', jobData.signUpPersons)
      console.log('所有字段名:', Object.keys(jobData))

      // 支援兩種返回結構：實際（扁平字段）與早前設計的 entity 結構
      const isFlat = !!jobData.hireRecruitUseItemVOList || !!jobData.hireName
      if (isFlat) {
        const items = Array.isArray(jobData.hireRecruitUseItemVOList) ? jobData.hireRecruitUseItemVOList : []
        // 解析福利標籤
        let tags: string[] = []
        const el = jobData.enterpriseLabel
        if (Array.isArray(el)) {
          tags = el
        } else if (typeof el === 'string') {
          try {
            if (el.trim().startsWith('[')) tags = JSON.parse(el)
            else tags = el.split(/[\s,，；;]+/).filter(Boolean)
          } catch { tags = el.split(/[\s,，；;]+/).filter(Boolean) }
        }

        console.log('扁平结构 - signUpPersons:', jobData.signUpPersons)
        console.log('扁平结构 - 其他可能的报名人数字段:', {
          signupCount: jobData.signupCount,
          applicationCount: jobData.applicationCount,
          signUpCount: jobData.signUpCount,
          signupPersons: jobData.signupPersons
        })
        jobInfo.value = {
          title: jobData.hireName || '',
          industry: '',
          location: jobData.enterpriseLocation || jobData.detailAddress || '',
          payTime: jobData.payTime || '',
		  jobId: jobData.id,
		  hireRecruitUseId: jobData.id, // 岗位id - 使用hireRecruitUseEntryId
		  hireRecruitUseEntryId: jobData.id, 
          jobType: jobData.useWorkType || jobData.signingType || '',
          roles: items.map((e: any) => ({ name: e.name || '', salary: e.workPrice || '' })),
          benefits: tags,
          applicationCount: '',
          positions: items.map((e: any) => ({
            name: e.name || '',
            requirements: e.positionRequire || '',
            wage: e.workPrice || '',
			id: e.id,
			commission: e.commission || null,
			limitSignUpPersons: e.limitSignUpPersons || null
          })),
          additionalInfo: [
            { title: '工期', content: jobData.duration || '' },
            { title: '借支', content: jobData.borrowing || '' },
            { title: '食宿', content: jobData.boardLodging || '' },
            { title: '商险', content: jobData.insurance || '' },
            { title: '其它', content: jobData.other || '' },
            { title: '面试时间', content: jobData.interviewTime || '' }
          ],
          companyName: jobData.customerName || '',
          companyScale: jobData.customerScale || '',
          signupCount: jobData.signupCount || 0,
          address: jobData.address || '',
          latitude: jobData.latitude || 0,
          longitude: jobData.longitude || 0,
          limitSignUpPersons: jobData.limitSignUpPersons || 0,
          commission: jobData.commission || ''
        } as any

        console.log('扁平结构 - 最终 signupCount:', jobInfo.value.signupCount)
        // 同步收藏狀態
        isFavorite.value = Boolean(jobData.collect)
        hasError.value = false
      } else {
        const entity = jobData.hireRecruitUseEntity || {}
        const welfare = jobData.laborCustomerWelfareEntity || {}
        const entries = Array.isArray(entity.hireRecruitUseEntry) ? entity.hireRecruitUseEntry : []
        const parsedTags = (() => {
          const src = welfare.enterpriseLabel || entity.cornerMark || ''
          if (Array.isArray(src)) return src
          if (typeof src === 'string') return src.split(/[\s,，；;]+/).filter(Boolean)
          return []
        })()
        
        console.log('Entity结构 - entity.signUpPersons:', entity.signUpPersons)
        console.log('Entity结构 - 其他可能的报名人数字段:', {
          signupCount: entity.signupCount,
          applicationCount: entity.applicationCount,
          signUpCount: entity.signUpCount,
          signupPersons: entity.signupPersons
        })
        
        jobInfo.value = {
          title: entity.hireName || entity.positionTitile || '',
          industry: entity.positionTitile || '',
		  jobId: entity.id,
		  hireRecruitUseId: entity.id, // 岗位id - 使用hireRecruitUseEntryId
		  hireRecruitUseEntryId: entity.customerId, 
          location: welfare.enterpriseLocation || welfare.detailAddress || entity.arrivedAddress || '',
          payTime: entity.payTime || welfare.salaryPeriod || '',
          jobType: entity.signingType || '',
		  positionName: entity.positionName || '',
          roles: entries.map((e: any) => ({ name: e.positionName || '', salary: e.price != null ? `${e.price}元/时` : '' })),
          benefits: parsedTags,
          applicationCount: String(entity.signUpPersons || 0),
          positions: entries.map((e: any) => ({
            name: e.positionName || '',
            requirements: e.positionRequire || entity.jobRequirements || '',
            wage: e.price != null ? `${e.price}元/时` : '',
			id: e.id,
			commission: e.commission || null,
			limitSignUpPersons: e.limitSignUpPersons || null
          })),
          additionalInfo: [
            { title: '工期', content: entity.duration || entity.projectCycle || '' },
            { title: '借支', content: welfare.borrowPayment || entity.borrowing || '' },
            { title: '食宿', content: welfare.boardLodginDesc || welfare.boardLodgin || '' },
            { title: '保险', content: entity.insurance || (welfare.isBusinessSecurity === 1 ? '有' : '') },
            { title: '其它', content: entity.otherRemark || '' },
            { title: '面试时间', content: entity.interviewTime || '' }
          ],
          companyName: welfare.customerName || '',
          companyScale: welfare.companyScale || '',
          signupCount: entity.signUpPersons || 0,
          address: jobData.address || '',
          latitude: jobData.latitude || 0,
          longitude: jobData.longitude || 0,
          limitSignUpPersons: entity.limitSignUpPersons || 0,
          commission: entity.commission || ''
        } as any
        
        console.log('Entity结构 - 最终 signupCount:', jobInfo.value.signupCount)
      }
    } else {
      console.error('获取岗位详情失败:', result?.msg)
      hasError.value = true
    }
  } catch (error) {
    console.error('获取岗位详情异常:', error)
    hasError.value = true
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  console.log('岗位详情页 onMounted 执行')
  
  // 获取页面参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options || {}
  
  console.log('页面参数:', options)
  
  // 从URL参数中获取岗位ID
  const jobId = options.jobId || ''
  currentJobId.value = jobId
  
  console.log('获取到的岗位ID:', jobId)
  
  if (jobId) {
    console.log('开始调用接口获取岗位详情')
    // 调用接口获取岗位详情
    fetchJobDetails(jobId)
  } else {
    console.error('未获取到岗位ID')
    hasError.value = true
  }
})

const goBack = () => {
  uni.navigateBack()
}

// 切换收藏状态
const toggleFavorite = async () => {
	// 检查用户是否已实名认证
  if (!userStore.isVerified.value) {
	  uni.showModal({
	    title: '提示',
	    content: '您还未实名认证，请先完成实名认证后再报名',
	    confirmText: '去认证',
	    cancelText: '取消',
	    success: (res) => {
	      if (res.confirm) {
	        // 跳转到实名认证页面
	        uni.navigateTo({
	          url: '/pages/verification/verification'
	      })
	     }
	  }
	})
	return
  }
  const targetFlag = !isFavorite.value
  const jobId = currentJobId.value
  const openId = userStore.getOpenId()
  if (!jobId || !openId) {
    uni.showToast({ title: '参数缺失，无法操作', icon: 'none' })
    return
  }
  // 樂觀更新
  const prev = isFavorite.value
  isFavorite.value = targetFlag
  try {
    const res: any = await userApi.follow({ hireRecruitUseId: jobId, openId, followFlag: targetFlag })
    if (!res || res.code !== 200) {
      throw new Error(res?.msg || '操作失败')
    }
    uni.showToast({ title: targetFlag ? '已收藏' : '已取消收藏', icon: targetFlag ? 'success' : 'none' })
  } catch (e) {
    // 回滾
    isFavorite.value = prev
    uni.showToast({ title: '操作失败，请重试', icon: 'none' })
  }
}

const applyPosition = (position: any) => {
  // 检查用户是否已实名认证
  if (!userStore.isVerified.value) {
    uni.showModal({
      title: '提示',
      content: '您还未实名认证，请先完成实名认证后再报名',
      confirmText: '去认证',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          // 跳转到实名认证页面
          uni.navigateTo({
            url: '/pages/verification/verification'
          })
        }
      }
    })
    return
  }
  
  // 获取页面参数，检查是否带有shareOpenId
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options || {}
  const shareOpenId = options.shareOpenId
  
  // 如果没有shareOpenId参数，显示企业微信二维码弹窗
  if (!shareOpenId) {
    showWeChatQRCodeModal()
    return
  }
  
  // 有shareOpenId参数，直接跳转到报名页面并携带shareOpenId
  const params = {
    jobId: jobInfo.value.hireRecruitUseId,
    hireRecruitUseId: jobInfo.value.hireRecruitUseId, // 岗位id - 使用hireRecruitUseEntryId
    hireRecruitUseEntryId: position.id, 
    jobTitle: jobInfo.value.title,
    jobSalary: position.wage,
    jobLocation: jobInfo.value.location,
    customerName: jobInfo.value.companyName,
    address: jobInfo.value.address,
    positionName: position.name,
    shareOpenId: shareOpenId, // 携带分享者的openId
    jobData: encodeURIComponent(JSON.stringify(position.rawData || position))
  }
  
  uni.navigateTo({
    url: `/pages/job-application/job-application?${Object.entries(params).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&')}`
  })
}

const retryFetch = () => {
  if (currentJobId.value) {
    hasError.value = false
    fetchJobDetails(currentJobId.value)
  }
}

// 显示企业微信二维码弹窗
const showWeChatQRCodeModal = () => {
  showQRCodeModal.value = true
}

// 关闭企业微信二维码弹窗
const closeQRCodeModal = () => {
  showQRCodeModal.value = false
}

// 保存二维码到相册
const saveQRCodeToAlbum = () => {
  uni.saveImageToPhotosAlbum({
    filePath: '/static/qrcode/wechat-qr.png', // 这里需要替换为实际的企业微信二维码图片路径
    success: () => {
      uni.showToast({
        title: '二维码已保存到相册',
        icon: 'success'
      })
    },
    fail: (err) => {
      console.error('保存失败:', err)
      uni.showToast({
        title: '保存失败，请重试',
        icon: 'none'
      })
    }
  })
}

// 打开企业导航
const openCompanyNavigation = () => {
  // 检查是否有企业位置信息
  if (!jobInfo.value.address || !jobInfo.value.latitude || !jobInfo.value.longitude) {
    uni.showToast({
      title: '暂无企业位置信息',
      icon: 'none'
    })
    return
  }
  
  // 使用微信小程序的导航接口
  uni.openLocation({
    latitude: jobInfo.value.latitude,
    longitude: jobInfo.value.longitude,
    name: jobInfo.value.companyName || '企业位置',
    address: jobInfo.value.address,
    scale: 15,
    success: () => {
      console.log('企业导航页面打开成功')
    },
    fail: (err) => {
      console.error('打开企业导航失败:', err)
      uni.showToast({
        title: '打开导航失败',
        icon: 'none'
      })
    }
  })
}


// 微信小程序分享到聊天
onShareAppMessage(() => {
  const userInfo = userCache.getUserInfo()
  const openId = userStore.getOpenId()
  
  let shareUrl = `/pages/job-details/job-details?jobId=${currentJobId.value}`
  
  // 如果当前用户是招聘类型用户，在分享链接中带上openId
  if (userInfo && userInfo.isHirePerson && openId) {
    shareUrl += `&shareOpenId=${openId}`
    console.log('招聘用户分享到聊天，带上openId:', openId)
  }
  
  return {
    title: jobInfo.value.title || '职位详情',
    path: shareUrl,
  }
})

// 微信小程序分享到朋友圈
onShareTimeline(() => {
  const userInfo = userCache.getUserInfo()
  const openId = userStore.getOpenId()
  
  let shareUrl = `/pages/job-details/job-details?jobId=${currentJobId.value}`
  
  // 如果当前用户是招聘类型用户，在分享链接中带上openId
  if (userInfo && userInfo.isHirePerson && openId) {
    shareUrl += `&shareOpenId=${openId}`
    console.log('招聘用户分享到朋友圈，带上openId:', openId)
  }
  
  return {
    title: jobInfo.value.title || '职位详情',
    path: shareUrl,
  }
})
</script>

<style lang="scss" scoped>
.job-details {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 40rpx;
  background-image: linear-gradient(#ffede3, #fff 100rpx);
}

.star-icon {
  padding: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999999;
  }
}

.error-state {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 80rpx 30rpx;
  margin: 20rpx;
  text-align: center;
  .error-text {
    display: block;
    margin: 20rpx 0 30rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.job-header {
  // background-color: #FFFFFF;
  padding: 40rpx 30rpx;
  margin-bottom: 20rpx;
}

.job-title-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.title-star {
  margin-left: 8rpx;
  padding: 6rpx;
  display: flex;
  align-items: center;
  transform: translateY(-6rpx); /* 稍微上移 */
}

.job-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 12rpx;
}

.job-type-chip {
  font-size: 24rpx;
  color: #333;
  background: #fff;
  border: 1rpx solid #E6E6E6;
  padding: 6rpx 16rpx;
  border-radius: 10rpx;
}

.job-subtitle {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 24rpx;
}

.job-roles {
  margin-bottom: 24rpx;
}

.role-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.role-name {
  font-size: 28rpx;
  color: #333333;
}

.role-salary {
  font-size: 28rpx;
  color: var(--u-primary);
  font-weight: 600;
}

.benefits-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.tag-item {
  background: var(--u-primary-light);
  border: 1rpx solid var(--u-primary-plain);
  color: var(--u-primary);
  padding: 10rpx 18rpx;
  border-radius: 10rpx;
}

.tag-text {
  font-size: 24rpx;
  color: var(--u-primary);
}

.application-count {
  display: flex;
  align-items: center;
}

.count-label {
  font-size: 28rpx;
  color: #666;
}

.count-number {
  font-size: 28rpx;
  color: var(--u-primary);
  font-weight: 600;
}

.count-unit {
  font-size: 28rpx;
  color: #666;
}

/* 招聘人员可见信息 - 每行下方 */
.hire-info-row {
  background-color: #F8F8F8;
  border-bottom: 1rpx solid #EEEEEE;
  padding: 16rpx 30rpx;
  margin-bottom: 0;
}

.hire-info-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hire-info-item {
  display: flex;
  align-items: center;
}

.hire-info-label {
  font-size: 28rpx;
  color: #666;
}

.hire-info-number {
  font-size: 28rpx;
  color: var(--u-primary);
  font-weight: 600;
}

.hire-info-unit {
  font-size: 28rpx;
  color: #666;
}

.hire-info-value {
  font-size: 28rpx;
  color: #333333;
  font-weight: 600;
}

.salary-benefits-section {
  background-color: #FFFFFF;
  // margin: 0 20rpx 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  padding-top: 0;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20rpx;
}

.payment-info {
  margin-bottom: 24rpx;
}

.payment-text {
  font-size: 28rpx;
  color: #666666;
}

.job-table {
  border: 1rpx solid #EEEEEE;
  border-radius: 8rpx;
  overflow: hidden;
}

.table-header {
  display: flex;
  background-color: #F8F8F8;
  border-bottom: 1rpx solid #EEEEEE;
}

.header-cell {
  padding: 20rpx 16rpx;
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  text-align: center;
  border-right: 1rpx solid #EEEEEE; /* 表頭縱向分隔線 */
  
  &:first-child {
    width: 200rpx; /* 岗位列 */
  }
  &:nth-child(2) {
    flex: 200rpx;
    flex-direction: column;
    align-items: center; /* 居中對齊“崗位要求/工價”列 */
  }
  
  &:nth-child(3) {
    flex: 200rpx;
    flex-direction: column;
    align-items: center; /* 居中對齊“崗位要求/工價”列 */
  }
  &:last-child {
    flex: 200rpx;
    border-right: none;
	justify-content: center;
  }
}

.table-row {
  display: flex;
  border-bottom: 1rpx solid #EEEEEE;
  
  &:last-child {
    border-bottom: none;
  }
}

.cell {
  padding: 20rpx 16rpx;
  font-size: 26rpx;
  color: #333333;
  display: flex;
  align-items: center;
  border-right: 1rpx solid #EEEEEE; /* 單元格縱向分隔線 */
  
  &:first-child {
    flex: 200rpx;
    font-weight: 500;
    justify-content: center; /* 岗位列居中 */
    text-align: center;
  }
  &:nth-child(2) {
    flex: 200rpx;
    flex-direction: column;
    align-items: center; /* 居中對齊“崗位要求/工價”列 */
  }
  
  &:nth-child(3) {
    flex: 200rpx;
    flex-direction: column;
    align-items: center; /* 居中對齊“崗位要求/工價”列 */
  }
  
  &:last-child {
    flex: 200rpx;
    justify-content: center;
    border-right: none;
  }
}

.requirements-cell {
  align-items: center;
  text-align: center;
  justify-content: center;
  .requirements-text {
    font-size: 24rpx;
    color: #666666;
    line-height: 1.4;
    margin-bottom: 8rpx;
    width: 100%;
    text-align: center;
  }
  
  .wage-text {
    font-size: 26rpx;
    color: var(--u-red);
    font-weight: 600;
    width: 100%;
    text-align: center;
  }
}

/* 岗位列文字置中 */
.position-name {
  width: 100%;
  text-align: center;
}

.info-cards {
  background-color: #fff;
}

.info-card {
  background-color: var(--u-primary-plain-disabled); /* 依照截圖取色：淺橘底 */
  border-radius: 12rpx;
  padding: 18rpx;
  border: 1rpx solid var(--u-primary-disabled); /* 依照截圖取色：邊框 */
  margin: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  margin-top: 0;
  &:nth-last-child(1){
      margin-bottom: 0;
  }
}

.card-title {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 8rpx;
  display: block;
  width: 140rpx;
}

.card-content {
  flex: 1;
  font-size: 28rpx;
  color: #333333;
}

.company-section {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
}

.company-info {
  .company-name {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 16rpx;
    display: block;
  }
  .company-scale {
    font-size: 26rpx;
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 12rpx;
    .label { color: #999; }
    .value { color: #333; }
  }
  
  .company-address-row {
    margin-bottom: 12rpx;
    display: flex;
    align-items: start;
	margin-top: 12rpx;
    
    .address-text {
      font-size: 26rpx;
      color: #666666;
      line-height: 1.4;
    }
    
    .navigation-btn {
      width: 32rpx;
      height: 32rpx;
      background-color: #F5F5F5;
      border-radius: 16rpx;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1rpx solid #E0E0E0;
      margin-left: 8rpx;
      cursor: pointer;
      
      &:active {
        background-color: #E8E8E8;
      }
    }
  }
  
  .company-placeholder {
    height: 2rpx;
    background: repeating-linear-gradient(
      to right,
      #DDDDDD 0,
      #DDDDDD 8rpx,
      transparent 8rpx,
      transparent 16rpx
    );
  }
}

/* 企业微信二维码弹窗样式 */
.qr-code-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999999;
}

.qr-code-content {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  width: 600rpx;
  max-width: 90%;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.qr-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.qr-code-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  background-color: #F5F5F5;
}

.qr-code-body {
  padding: 40rpx 30rpx;
  text-align: center;
}

.qr-code-image-container {
  width: 400rpx;
  height: 400rpx;
  margin: 0 auto 30rpx;
  background-color: #F8F8F8;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #E8E8E8;
}

.qr-code-image {
  width: 360rpx;
  height: 360rpx;
}

.qr-code-text {
  margin-bottom: 20rpx;
}

.main-text {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 12rpx;
}

.sub-text {
  display: block;
  font-size: 24rpx;
  color: #666666;
  line-height: 1.4;
}

.qr-code-actions {
  padding: 0 30rpx 30rpx;
}
.gd-btn{
	position: fixed;
	bottom: 10%;
	right: 20rpx;
	z-index: 999999;
	width: 100rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	button{
		border: none;
		width: 100%;
		padding: 0;
		margin-bottom: 20rpx;
	}
	.gd-btn-img{
		width: 80rpx;
		height: 120rpx;
		display: block;
	}
}
</style> 